<template>
	<div class="transaction">
		<ul class="nav">
			<li :class='{checked: conLi == 1}' @click='commonJy(1)'>我的买单</li>
			<li :class='{checked: conLi == 2}' @click='commonJy(2)'>我的卖单</li>
		</ul>
		<div class="prompt" v-if="initData.length == 0">暂无数据</div>
		<table class="table" v-else>
			<tr>
				<th>状态</th>
				<th>市值</th>
				<th>数量</th>
				<th>时间</th>
			</tr>
			<tr v-for="(item,index) in initData" :key='index'>
				<td>{{ item.status | TXLStatus }}</td>
				<td>{{ item.price }}</td>
				<td>{{ item.trade_num }}</td>
				<td>{{ item.trade_time | fmtDate }}</td>
			</tr>
		</table>
		<!-- <ul class="content">
			<li @click='showDown'>
				<h2><p>订单时间：2018-05-22 10:22</p><span>已确认</span></h2>
				<h4>
					<span>数量：10000</span>
					<span>市值：1.2200</span>
					<b>买方编号：LJZ9913</b>
				</h4>
				<div class="posMore">查看更多</div>
			</li>
		</ul>
		<div class="bullet" v-if="isShow">
			<div class="bg" @click="isShow = false"></div>
			<div class="content">
				<div class="title">订单详情</div>
				<div class="con">
					<h4><span>订单编号：</span><b>TD20180522000006</b></h4>
					<h4><span>买方姓名：</span><b>马冬冬</b></h4>
					<h4><span>买方编号：</span><b>LJZ9913</b></h4>
					<h4><span>手 机 号：</span><b>15617777777</b></h4>
					<h4><span>付款金额：</span><b>￥52687.22</b></h4>
					<h4 class="img">
						<span>付款凭证：</span>
						<img src="http://img.ui.cn/data/file/9/9/4/1800499.gif" alt="">
					</h4>
				</div>
				<input type="button" class="submitBtn" @click="isShow = false" value="我知道了">
			</div>
		</div> -->
	</div>
</template>

<script>
import { trding } from "../../../../config/getData";
export default {
	data() {
		return {
			isShow:false,
			conLi: "1",
			currentView: "purch",
			address: "purchaser",
			tableData3: [],
			clickObj:{},
			initData:[]
		};
	},
	mounted() {
		this.getData(1, 1);
	},
	methods: {
		showDown(){
			this.isShow = true
		},
		getData(pageNum, type) {
		  trding(pageNum, type).then(res => {
			  this.initData = res.data
		  });
		},
		commonJy(index) {
			this.conLi = index;
			this.getData(1, index);
		},
	},
};
</script>

<style lang="scss" scoped>
@import "../../../../assets/css/all";
.transaction {@include screen;
	.nav {display: flex;font-size: 16px;position: relative;background-color: #fff;
		li {flex: 1;text-align: center;padding: 10px 0;}
		li.checked {color: $red;}
		li:first-child {border-right: 1px solid #e6e6e6; }
	}
	.content {
		li{position: relative;line-height:1;margin:15px 0;padding:20px;overflow: hidden;background-color: #fff;
			h2{display: flex;justify-content: space-between;font-size: 15px;font-weight: normal;
				p{font-weight: bold;margin-bottom: 20px;}
				span{color:#FF554B;}
			}
			h4{
				span{padding:6px;border-radius: 3px;color:white;font-size: 12px;margin-right: 8px;}
				span:nth-of-type(1){background-color: #FE7976;}
				span:nth-of-type(2){background-color: #51A8FF;}
				b{color:#FF554B;font-weight: normal;}
			}
			.posMore{position: absolute;right: -37px;bottom: -15px;font-size: 12px;padding: 4px 20px 31px;background-color: #FFA526;color: white;transform: rotate(-45deg);}
		}
	}
	.table{margin-top:15px;}
	.bullet{position: fixed;left:0;top:0;
		.bg{position: fixed;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);}
		.content{background-color: white;width:90%;margin-left:5%;position: fixed;z-index:10;top:50%;transform: translateY(-50%);box-sizing: border-box;border-radius:5px;overflow: hidden;
			.title{text-align: center;font-size: 17px;line-height: 60px;}
			.con{max-height: 400px;overflow-y:auto;padding-bottom:15px;
				> * {padding:0 15px;}
				h4{font-weight: normal;line-height:30px;

					b{font-weight: normal;}
				}
				.img img{width:100%;display: block;}
			}
			.submitBtn{width:100%;height:45px;color:#F02B2B;background-color: white;border-top:1px solid #e6e6e6;font-size: 16px;}
		}
	}
}
.prompt{margin:15px 0 18px;text-align: center;
	a{color:$red;margin-top:9px;display: block;}
}

</style>
